<template>
	<footer class="footer">
		<!-- This should be `0 items left` by default -->
		<span class="todo-count">
			<strong>{{ todoStoreData.items }}</strong> item left
		</span>
		<!-- Remove this if you don't implement routing -->
		<ul class="filters">
			<li>
				<a class="selected" href="#/" @click="allTodoData">All</a>
			</li>
			<li>
				<a href="#/active" @click="OutTodoDate">Active</a>
			</li>
			<li>
				<a href="#/completed" @click="overTodoData">Completed</a>
			</li>
		</ul>
		<!-- Hidden if no completed items are left ↓ -->
		<button class="clear-completed" @click="destorysTodoData">Clear completed</button>
	</footer>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { useTodoStore } from '../store/todoStore';

//获取到pinia容器中存储的数据进行个数判断
const todoStoreData = useTodoStore();
//直接调用pinia中getter写的items写到模板上
//! 清空所有已完成的任务
const destorysTodoData = () => {
	todoStoreData.todoList = todoStoreData.todoList.filter((item: any) => {
		if (item.status) {
			//发送请求 
			 axios.delete('http://localhost:8000/todo/' + item.id)
			// console.log(serverBack);
		}
		return !item.status
	})

}
//~ 显示全部任务
const allTodoData = async () => {
	todoStoreData.allTodoData()
}

//? 显示未完成的任务
const OutTodoDate = () => {
	todoStoreData.OutTodoDate()
}
//^ 显示已经完成的任务
const overTodoData = () => {
	todoStoreData.overTodoData()
}
</script>

<style>
</style>